<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<style type="text/css">
			.content{
				width: 100%;
				background-color: #F2F2F2;
				padding: 10px;
			}
			.search{
				display: flex;
				justify-content: center;
				align-content: center;
				padding: 10px;
				background-color: white;
			}
			.simg{
				width: 30px;
				height: 30px;
			}
			.simg>img{
				width: 100%;
				height: 100%;
			}
			.ssdiv{
				width: 75%;
			}
			.ssinp{
				width: 100%;
				height: 100%;
				border: 0;
				padding-left: 20px;
			}
			
			.context{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				height: calc(100% - 70px);
			}
			.tleft{
				width: 25%;
			}
			.tright{
				width: 75%;
				
				height: 100%
			}
			.tmain{
				width: 100%;
				height: 100%;
			}
			.tleft>div{
				width: 100%;
				height: 2.5em;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.bgw{
				background-color: white;
			}
			.goodsdiv{
				width: 100%;
				padding: 0.5em;
				height: auto;
				border-bottom: 1px solid #ACACB4;
			}
			
			.topdiv{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.botdiv{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				
			}
			.toptext{
				width: 60%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: column;
				height: 4.375em;
				padding: 0.2em;
			}
			.topimg{
				display: flex;
				justify-content: center;
				align-content: center;
				width: 25%;
				height: auto;
			}
			.topimg>img{
				border-radius: 50%;
				width: 100%;
				height: 100%;
			}
			.qian{
				width: 50%;
			}
			.textdiv{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">服务列表</h1>
		</header>
		<div class="mui-content">
		    <div class="content">
		    	<div class="search">
		    		<div class="simg">
		    			<!--
                        	作者：592176224@qq.com
                        	时间：2019-02-21
                        	描述：
		    			<img src="../../img/ss-img2.png"/>
                        -->
		    		</div>
		    		<div class="ssdiv">
		    			<input class="ssinp" type="" name="" id="" value=""  placeholder="请输入编码或名称"/>
		    		</div>
		    		<div class="simg">
		    			<img src="../../img/ss-img2.png"/>
		    			<!--
                        	作者：592176224@qq.com
                        	时间：2019-01-25
                        	描述：
		    			<img src="../images/60x60.gif"/>
                        -->
		    		</div>
		    	</div>
		    </div>
		    <div class="context">
		    	<div class="tleft fe09" id="selectdiv">
		    		<!--
                    	作者：592176224@qq.com
                    	时间：2019-01-14
                    	描述：
		    		<div class="bgw"  href="#" id="1">
		    			所有商品
		    		</div>
		    		<div class="" href="#" id="1">
		    			1个商品
		    		</div>
		    		<div class="" id="2" href="#">
		    			2个商品
		    		</div>
                    -->
		    	</div>
		    	<div class="tright bgw">
		    		<div class="tmain" id="tmain">
		    			<!--
                        	作者：592176224@qq.com
                        	时间：2019-01-25
                        	描述：
                        <div class="goodsdiv">
		    				<div class="topdiv">
		    					<div class="topimg">
		    						<img src="../../images/books_bg.png"/>
		    					</div>
			    					<div class="toptext">
			    						<div class="textdiv">
			    							<span class="fe09">
			    							
			    							</span>
			    							<span class="fe09">
			    								
			    							</span>
			    						</div>
			    						<div class="textdiv">
			    								<span class="fe09">
			    									库存：
			    								</span>
			    								<span id="">
			    							选择
			    								</span>
			    						</div>
			    					</div>
		    				</div>
		    			</div>
                        -->
		    			  	
		    		</div>
		    	</div>
		    </div>
		    
		    
		    
		    
		    
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!--
        	作者：592176224@qq.com
        	时间：2019-01-29
        	描述：
        	<script src="../../js/mui.min.js"></script>
        -->
		<script src="../../js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/lcsutil.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			(function(m){
				var service = function(){}
				$.extend(service.prototype,{
					rid:0,
					sort_id:0,
					pagenums:1,
					tarnum:0,
					pageid:"",
					returnfun:"",
					onReady:function(){
						var that = this;
						m.init();
						m.plusReady(function(){
							var view = plus.webview.currentWebview();
							that.pageid = view.pageid;
							that.returnfun = view.returnfun;
						})
						that.getServiceType();
						that.getsortlist();
						that.setaddEventListener();
						
						
					},
					backpage:function(gid,gname,gprice){
						var that = this;
						var preView = plus.webview.getWebviewById(that.pageid);
						m.fire(preView, that.returnfun, {
		                   'gid':gid,
		                   'gname':gname,
		                   'gprice':gprice
		                }); 
		                m.back();
					},
					setaddEventListener:function(){
						var that = this;
						$('#selectdiv').on('tap', 'div', function(e) {
			                var targettab = this.getAttribute('id');
			                console.log(targettab);
			                that.tarnum = targettab;
			                var targetclass = this.getAttribute('class');
				                if(targetclass == ""&&targettab != "addproduct"){
				                	$(this).addClass('bgw').siblings().removeClass('bgw');
				                	that.getsortlist(targettab);
				                }else{
				                	
				                }
			           	});
						
					},
					getServiceType:function(){
						var data = {url:"/api/product_sort/lst",data:{access_token:acctoken()}}
						ajax(data,function(res){
							console.log("获取商品类型",res)
							var str = '<div class="bgw" id="0">所有商品</div>';
							for(var i = 0; i < res.data.length; i++){
								str += '<div class="" id="'+res.data[i].id+'" onclick="">'+
						    			res.data[i].name+
						    			'</div>';
							}
							g("selectdiv").innerHTML = str;
						});
					},
					gocomset:function(rid){
						var list = {rid: rid}
						mui.openWindow({
						    url: 'commission-set.html?rid='+rid, 
						    id: 'commission-set',
						    extras: list,
						 });
					},
					getsortlist:function(sid){
						var that = this;
						var data = {url:"/api/product/list_sort",
							data:{
								access_token:acctoken(),
								sort_id:sid||that.sort_id,
								page:that.pagenums
							}
						}
						ajax(data,function(res){
							console.log("商品数据",res);
							that.setsortlist(res.data.data);
						})
					},
					setsortlist:function(data){
						var that = this;
						var str = "";
						for(var i = 0; i < data.length; i++){
				    		str += '<div class="goodsdiv" id="span'+data[i].id+'">'+
				    		'<div class="topdiv"><div class="topimg">';
				    		if(data[i].product_images && data[i].product_images.path_name){
	    					str += '<img src="'+data[i].product_images.path_name+'"/>';
	    				}else{
	    					str += '<img src="../../img/noimg.png"/>';
	    				}
//	    				'<img src="'+data[i].images+'"/>'+
	    				str += '</div><div class="toptext"><div class="textdiv"><span class="fe09">'+
		    			data[i].product_name +
		    			'</span><span class="fe05">￥'+
		    			data[i].retail_price +
		    			'</span></div><div class="textdiv"><span class="fe05">库存：'+
		    			data[i].stock +
		    			'</span></div><div class="textdiv"><span class="fe05">积分：'+
		    			data[i].convert_point +
		    			'</span></div><div class="">'+
		    			'</div></div></div></div>';
						}
						str += '<div class="fgdbg"></div>';
						g("tmain").innerHTML = str;
						for(var i = 0; i < data.length; i++){
							that.addEventList(data[i]);
						}
					},
					addEventList:function(list){
						var that = this;
						g("span"+list.id).addEventListener("tap",function(e){
								that.backpage(list.id,list.product_name,list.member_price);
						})
					},
				});
				var ser = new service();
				//m.plusReady(function(){
					ser.onReady();
				//})
			})(mui)
		</script>
	</body>

</html>